<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--jq-->
    <script src="jquery/jquery.js"></script>

    <!--
    ztree.all=core+check+editor
    -->
    <!--<script src="static/jquery.ztree.core.js"></script>-->
    <script src="ztree/jquery.ztree.all-3.5.js"></script>
    <script src="vue/vue.js"></script>

    <!--ztree提供多种样式风格  也可以自定义-->
    <!--<link rel="stylesheet" href="static/ztree/zTreeStyle.css">-->
    <link rel="stylesheet" href="ztree/metro.css">
</head>
<body>
<div id="treeDiv" style="height: 100px;">
    <input style="width: 100px;" @focus="showTree(true)" v-model="name" />
    <ul id="treeDemo" class="ztree" v-show="isShow" >

    </ul>
</div>
</body>
</html>
<script>

    new Vue({
        el:'#treeDiv',
        data:{
            name:'',
            isShow:false,
            setting: {  //ztree的配置对象
                data: {//ztree的数据配置对象
                    simpleData: { //设置简单节点数组配置
                        enable:true //默认为false 设置true表示节点数组可以是一位结构
                    },
                    key:{
                        title:'title'
                    }
                }
            },
            nodes:[
                //ztree的节点数组
                {id:1,pId:0,name: '个人中心',open:true,title:'个人中心菜单'},
                {id:2,pId:1,name: '我的资料'},//子节点中的父id必须与父id一致
                {id:3,pId:0,name: '单位管理',title:'单位管理菜单'},
                {id:4,pId:3,name: '单位信息'},
                {id:5,pId:3,name: '单位账号'},
                {id:6,pId:3,name: '电子台账'},
                {id:7,pId:0,name: '系统管理',title:'系统管理菜单'}
            ]
        },
        methods:{
            showTree:function (isShow) {
                this.isShow =isShow;
            },
            /**
             * ztree开发流程：
             * 1.声明配置setting对象
             * 2.声明配置setting对象
             * 3.根据配置节点和节点对象，创建ztree对象
             * $fn.zTree.init(需要挂载树的dom节点对象，配置对象，节点数组对象)
             * 树初始化方法
             */
            initTree:function (){
              let tree =  $.fn.zTree.init($('#treeDemo'),this.setting,this.nodes);
                console.log(tree);
                console.log(tree.getNodes())
            }
        },
        //注意ul节点需要挂载到dom后，才能找到该节点 使用mounted生命周期方法
        mounted:function (){
            this.initTree();
        }
    })
</script>